<!--
 * @description  : 市管-日计划制定-添加零售户
 * @descriptionDetail: 市管-日计划制定-添加零售户
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
    <!-- #endif -->
    <view class="sticky-header">
      <u-search
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        v-model="keyword"
        @custom="handlerSearch"
      ></u-search>
    </view>
    <me-table 
      :i="0"
      :top="70"
      :index="0"
      :load-data="loadData"
      ref="mescrollItem0"
    > 
      <template #default="d">
        <view class="card">
          <u-row @tap="handlerSelectItem(d.data)">
            <u-col span="10">
              <client-item :client="d.data"></client-item>
            </u-col>
            <u-col span="2" style="text-align:right;">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                style="margin-right: 10px;"
                v-if="selectedUids.includes(d.data.retailerUuid)"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </template>
    </me-table>
  </view>
</template>

<script> 
import MeTable from '@/components/me-table.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import checkService from "@/service/check/check.service"
import ClientItem from './components/client-item.vue';
export default {
  components: { 
    MeTable,
    ClientItem,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      keyword: "",
      isSingle: false, // 是否单选，默认多选
      isSupple:false, // 判断是否为货物来源
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
      planList:[],
      newList:[],
    };
  },
  onLoad(option) {
    this.isSingle = option.isSingle;
    if(option.isSupple){
      this.isSupple = true;
    }
    let opt = this.getRouteParam();
    this.planList = this.$u.test.array(opt) ? opt : [];
    // console.log(this.planList)
  },
  methods: {
    setRightBtns() {
      // 设置右侧标题
      // #ifdef H5-DINGDING
        console.log("设置零售右侧按钮");
        // 先放开右侧标题
        this.$deviceApi.setRight("确定", () => {
          // 添加日计划操作
          this.handlerSure();
        }, true, true);
      // #endif
    },
    handlerSearch() {
      this.$refs['mescrollItem0'].refresh();
    },
    // 选中
    handlerSelectItem(item) {
      if (this.isSingle) {
        this.selectedUids = [item.retailerUuid,];
        this.selectedItems = [item,];
        return;
      }
      if (this.selectedUids.includes(item.retailerUuid)) {
        this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
      } else {
        this.selectedItems.push(item);
      }
      this.selectedUids = [];
      this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));
    },
    // 在线案件查询数据
    loadData(page) {
      // 调用后台接口查询数据：分页参数page.size, page.num
      return checkService.retailerListApp(page.num, page.size, {isSearchAll: true, queryStr: this.keyword,});
    },
    // 确定
    handlerSure() {
      let self = this;
      if(this.isSingle && !this.$u.test.isEmpty(this.selectedItems)){
        if(this.isSupple){
          // 货源来源添加
          this.backPrev({
            paramKey: this.$rp.check.CHECK_CLIENT,
            param : this.selectedItems, 
          });
        }else{
          this.$modal.confirm("请选择任务", () => {
            this.$u.loading("加载中");
            checkService.addTempDayPlan(this.selectedItems[0].retailerUuid, this.selectedItems[0].licNo || "").then(dr => {
              if (dr.success) {
                this.$set(this.selectedItems,'add','true')
                this.backPrev({
                  paramKey: this.$rp.check.CHECK_CLIENT,
                  param : this.selectedItems, 
                });
                this.selectedUids = this.selectedItems = [];
              } else {
                this.$u.toast(dr.msg);
              }
            });
          }, () => {
            // console.log(112)
            checkService.addImportPlan(this.selectedItems[0].retailerUuid, this.selectedItems[0].licNo || "").then(dr => {
              if (dr.success) {
                this.$set(this.selectedItems,'add','true')
                this.backPrev({
                  paramKey: this.$rp.check.CHECK_CLIENT,
                  param : this.selectedItems, 
                });
                this.selectedUids = this.selectedItems = [];
              } else {
                this.$u.toast(dr.msg);
              }
            });
          },'临时走访','重点检查')
        }
      } else{
        // 零售户添加
        if (this.selectedItems.length == 0) {
          this.$u.toast("请选择任务");
          return;
        }
        this.planList.forEach(item => {
          self.newList.push(item.retailerUuid)
        }) 
        let idList = self.selectedItems.filter(r => {
          return self.newList.includes(r.retailerUuid)
        })
        if(idList.length > 0){
          this.$u.hideLoading();
          this.selectedItems.filter(item => {
            if(item.retailerUuid == idList[0].retailerUuid){
              this.$u.toast(`【${item.companyName}】已存在`);
            }
          })
          return
        }
        this.backPrev({
          paramKey: this.$rp.check.CHECK_CLIENT,
          param : this.selectedItems, 
        });
        this.selectedUids = this.selectedItems = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
.sticky-header {
  background-color: #fff;
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 44px;
  /* #endif */
  width: 100%;
  height: 40px;
  z-index: 999;
}
</style>
